<template>
    <view class="wanlpage-advert-image">
        <view class="image" :class="[`layout-${pageData.params.imgLayout}`]" :style="[pageData.style]">
            <view
                class="item"
                v-for="(image, keys) in pageData.data"
                :key="keys"
                :style="{ margin: pageData.params.imgPaddingTb + ' ' + pageData.params.imgPaddingLf }"
                @tap="onLink(image.link)"
            >
                <image :src="$wanlshop.oss(image.image, 420, 0, 1, 'transparent', 'png')" mode="widthFix" />
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "WanlPageImage",
    props: {
        pageData: {
            type: Object,
            default: function () {
                return {
                    name: "图片组件",
                    type: "image",
                    params: [],
                    style: [],
                    data: [],
                };
            },
        },
    },
    methods: {
        async onLink(url) {
            this.$wanlshop.on(url);
        },
    },
};
</script>
<style lang="scss">
.wanlpage-advert-image {
    image {
        width: 100% !important;
    }
    /*图片橱窗*/
    .image {
        display: flex;
        overflow: hidden;
        .item {
            display: grid;
        }
        &.layout-1 {
            display: block;
        }

        &.layout-2 {
            flex-wrap: wrap;

            & > view {
                width: 50%;
            }
        }

        &.layout-3 {
            flex-wrap: wrap;

            & > view {
                width: 33.33333%;
            }
        }

        &.layout-4 {
            flex-wrap: wrap;

            & > view {
                width: 25%;
            }
        }

        &.layout-5 {
            flex-wrap: wrap;

            & > view {
                width: 20%;
            }
        }

        &.layout-11 {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            grid-auto-flow: row dense;

            view:nth-child(1) {
                grid-column: 1 / 3;
                grid-row: 1 / 3;
            }

            view:nth-child(2) {
                grid-column: 3 / 5;
                grid-row: 1 / 2;
            }
        }

        &.layout-12 {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            grid-auto-flow: row dense;

            view:nth-child(1) {
                grid-column: 1 / 5;
            }

            view:nth-child(2),
            view:nth-child(4) {
                grid-column: 1 / 3;
            }

            view:nth-child(3),
            view:nth-child(5) {
                grid-column: 3 / 5;
            }
        }

        &.layout-13 {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            grid-auto-flow: row dense;

            view:nth-child(1) {
                grid-column: 1 / 5;
            }

            view:nth-child(2),
            view:nth-child(5),
            view:nth-child(7) {
                grid-column: 1 / 3;
            }

            view:nth-child(6),
            view:nth-child(8) {
                grid-column: 3 / 5;
            }
        }

        &.layout-14 {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            grid-auto-flow: row dense;

            view:nth-child(1),
            view:nth-child(3),
            view:nth-child(6),
            view:nth-child(8) {
                grid-column: 1 / 3;
            }

            view:nth-child(2),
            view:nth-child(7),
            view:nth-child(9) {
                grid-column: 3 / 5;
            }
        }

        &.layout-15 {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            grid-auto-flow: row dense;

            view:nth-child(1),
            view:nth-child(6),
            view:nth-child(8) {
                grid-column: 1 / 3;
            }

            view:nth-child(2),
            view:nth-child(5),
            view:nth-child(7),
            view:nth-child(9) {
                grid-column: 3 / 5;
            }
        }

        &.layout-16 {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            grid-auto-flow: row dense;

            view:nth-child(1),
            view:nth-child(7) {
                grid-column: 1 / 3;
            }

            view:nth-child(2),
            view:nth-child(8) {
                grid-column: 3 / 5;
            }
        }

        &.layout-17 {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            grid-auto-flow: row dense;

            view:nth-child(1),
            view:nth-child(3) {
                grid-column: 1 / 3;
            }

            view:nth-child(2),
            view:nth-child(4) {
                grid-column: 3 / 5;
            }
        }
    }
}
</style>
